<template>
    <div id="map">

    </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { app } from '@/main';
/* 1、地图初始化 */
const gaode = new ol.layer.Tile({
        title: "高德地图",
        source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
        })
    });
    onMounted(() => {
        const map = new ol.Map({
            target: "map",
            layers: [
                gaode
            ],
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 6,
                projection: 'EPSG:4326'
            })
        })
        /* 2、地图全局变量的设置 */
        app.config.globalProperties.$map = map;
    })
</script>

<style lang="scss" scoped>
#map{
    width: 100vw;
    height: 100vh;
}
</style>